<template>
  <view v-if="visible" class="deco-vip-coupon" :style="[innerStyle]">
    <view class="flex justify-between items-center">
      <text class="font-32 font-bold">{{ data.data.title }}</text>
      <!-- 至尊会员判断 -->
      <template v-if="from.type === 'vipTwo'">
        <zm-icon-text v-if="isGrant" name="arrow" text="去使用" text-left color="#666666" text-color="#666666" @click="handleUseRouteJupm"></zm-icon-text>
      </template>
      <!-- 普通会员 -->
      <template v-else>
        <zm-icon-text v-if="login" name="arrow" text="去使用" text-left color="#666666" text-color="#666666" @click="handleUseRouteJupm"></zm-icon-text>
      </template>
    </view>
    <view class="flex mt-26">
      <image class="main-image" mode="scaleToFill" :src="data.data.mainImage"></image>
      <scroll-view scroll-x class="scroll-view">
        <view class="flex">
          <view v-for="(item, index) in list" :key="index" class="coupon-item" :style="{ 'border-color': themeColorRgba(0.2) }">
            <view class="coupon-tpp" :style="{ background: themeColorRgba(0.1) }">
              <text v-if="item.couponType == '2'" class="coupon-value" :style="{ color: themeColorRgba() }">{{ showPrice(item) | formatDigit }}</text>
              <text v-if="item.couponType == '2'" class="font-18 font-500" :style="{ color: themeColorRgba(0.6) }">{{ useRule(item) }}</text>
              <text v-else class="font-32 font-500" :style="{ color: themeColorRgba(0.6) }">{{ useRule(item) }}</text>
            </view>
            <!-- 至尊会员判断 -->
            <template v-if="from.type === 'vipTwo'">
              <view v-if="isGrant" class="coupon-bottom" :style="{ color: themeColorRgba(0.5), background: themeColorRgba(0.2), 'border-color': themeColorRgba(0.2) }">已发放</view>
              <view v-else class="coupon-bottom" :style="{ color: themeColorRgba(), background: themeColorRgba(0.2), 'border-color': themeColorRgba(0.2) }" @click="handleReceivedCoupon">
                领取
              </view>
            </template>
            <!-- 普通会员 -->
            <template v-else>
              <view v-if="isReceive(item)" class="coupon-bottom" :style="{ color: themeColorRgba(0.5), background: themeColorRgba(0.2), 'border-color': themeColorRgba(0.2) }">已领取</view>
              <view v-else-if="isLoot(item)" class="coupon-bottom" :style="{ color: themeColorRgba(0.5), background: themeColorRgba(0.2), 'border-color': themeColorRgba(0.2) }">已抢光</view>
              <view
                v-else
                class="coupon-bottom"
                :style="{ color: themeColorRgba(), background: themeColorRgba(0.2), 'border-color': themeColorRgba(0.2) }"
                @click="handleReceivedCoupon(item)"
              >
                领取
              </view>
            </template>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { mapGetters } from "vuex"
export default {
  name: "deco-vip-coupon",
  mixins: [mixin],
  data() {
    return {
      list: [],
      visible: false,
      theme: "#C86400",
      readOnly: false
    }
  },
  computed: {
    ...mapGetters(["login", "mobile", "userInfo"]),
    themeColorRgba() {
      return (a = 1) => {
        const { r, g, b } = uni.$hexToRgb(this.from?.config?.themeColor || "#6F0282")
        return `rgba(${r},${g},${b}, ${a})`
      }
    },
    // 是否已发放 vipTwo 会员卡
    isGrant() {
      return this.from.type === "vipTwo" && this.login && this.userInfo.level === "2"
    },
    // 是否领取
    isReceive() {
      return (item) => {
        return this.from.type === "vipOne" && item.state == 1
      }
    },
    // 是否抢光
    isLoot() {
      return (item) => {
        return this.from.type === "vipOne" && item.state == 2
      }
    },
    // 券规则 couponType 券类型 1=兑换 2=满减
    // 券面展示减免金额,根据不同的数据类型区分显示
    showPrice() {
      return (item) => {
        if (item.couponType == "2") {
          return item.discountType == 1 ? item.canFreePrice || item.reduceMoney || item.ticketValue : item.moneyOffConfig?.reduceMoney
        } else if (item.couponType == "1") {
          return item.ticketValue || item.exValue
        }
        return ""
      }
    },
    useRule() {
      return (item) => {
        if (item.couponType == "2") {
          if (item.discountType == "1") return "无门槛"
          if (item.discountType == "2") return `满${uni.$formatDigit(item.moneyOffConfig?.money)}元可用`
          if (item.discountType == "3") return `满${item.moneyOffConfig?.ticketNum}个座位`
          return `满${uni.$formatDigit(item.moneyOffConfig?.money)}元可用`
        } else if (item.couponType == "1") {
          return "兑换券"
        }
        return ""
      }
    }
  },
  watch: {
    data: {
      handler() {
        this.handleGetVipCardCouponList()
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.readOnly = this.decoEntryCommon.readOnly
    this.onEvents()
  },
  destroyed() {
    this.offEvents()
  },
  methods: {
    async handleGetVipCardCouponList() {
      if (this.from.type === "vipOne" && this.userInfo.level == "2") {
        this.$nextTick(() => {
          this.decoWrap?.hide()
        })
      } else {
        const res = await uni.$api.vipCard.getVipCardCouponList({ vipCardId: this.from?.config?.vipCardId, saleOrderNos: this.data?.data?.list.map((item) => item.orderNo).join(",") })
        const list = []
        if (res?.length) {
          res.forEach((item) => {
            for (let i = 0; i < item.number; i++) {
              if (uni.$check.isArray(item.moneyOffConfig)) item.moneyOffConfig = {}
              list.push(item)
            }
          })
        }
        this.list = list
        if (this.list.length) {
          this.visible = true
          this.decoWrap?.show()
        }
      }
    },
    // 领取优惠券
    async handleReceivedCoupon(item) {
      if (this.readOnly) return
      // 未登录
      if (!this.login) {
        uni.$emit(`${this.useCurrentRoute()}-login`)
        return this.$toast("请先登录")
      } else if (!this.mobile) {
        uni.$emit(`${this.useCurrentRoute()}-login`)
        return this.$toast("请先绑定手机号")
      }
      // 未开通
      if (this.from.type === "vipTwo" && this.userInfo.level !== "2") {
        this.$toast("请先开通会员")
        this.mitt.emit("deco-vip-buy-button.open", "vipTwo")
      } else {
        await uni.$api.vipCardV2.receivedCoupon({ orderNo: item.saleOrderNo })
        this.handleGetVipCardCouponList()
        this.$toast({
          type: "success",
          content: "优惠券已放入您的账户"
        })
      }
    },
    handleUseRouteJupm() {
      this.useRouteJupm(this.data.data)
    },
    onEvents() {
      uni.$on("login-success", () => {
        this.handleGetVipCardCouponList()
      })
      uni.$on("logout-success", () => {
        this.handleGetVipCardCouponList()
      })
    },
    offEvents() {
      uni.$off("login-success")
      uni.$off("logout-success")
    }
  }
}
</script>

<style lang="scss" scoped>
.main-image {
  width: 206rpx;
  height: 154rpx;
  border-radius: 16rpx;
}
.scroll-view {
  width: calc(100% - 206rpx - 12rpx);
  margin-left: 12rpx;
  .coupon-item {
    width: 148rpx;
    height: 154rpx;
    margin-right: 12rpx;
    border-radius: 16rpx;
    border: 2rpx solid #e6d7cf;
    .coupon-tpp {
      height: 96rpx;
      display: flex;
      padding: 12rpx 0;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      background-color: #fff4e9;
      .coupon-value {
        color: #7b2e06;
        font-size: 48rpx;
        font-weight: bold;
        line-height: 1;
        &::after {
          content: "元";
          font-size: 26rpx;
          font-weight: bold;
        }
      }
    }
    .coupon-bottom {
      color: #7b2e06;
      height: calc(100% - 96rpx);
      display: flex;
      font-size: 24rpx;
      font-weight: bold;
      position: relative;
      align-items: center;
      justify-content: center;
      border-top: 2rpx dashed #ffe6cf;
      border-bottom-left-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
      &::after,
      &::before {
        content: " ";
        top: -8rpx;
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        position: absolute;
        background-color: var(--deco-background-color);
      }
      &::after {
        left: -8rpx;
        transform: rotate(45deg);
        border-top: 2rpx solid var(--deco-background-color);
        border-right: 2rpx solid var(--deco-background-color);
      }
      &::before {
        right: -8rpx;
        transform: rotate(-45deg);
        border-top: 2rpx solid var(--deco-background-color);
        border-left: 2rpx solid var(--deco-background-color);
      }
    }
  }
}
</style>
